<?php
session_start();
require_once __DIR__ . '/../app/core/config.php';
require_once __DIR__ . '/../app/core/guards.php';

$guard      = new PaywallGuard();
$stats      = $guard->getUsageStats();
$user_email = $_SESSION['user_email'] ?? null;
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-XJ1XQE81F5"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-XJ1XQE81F5');
    </script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Premium Plans & Pricing | ClientRadar - Unlimited Access</title>
    <meta name="title" content="Premium Plans & Pricing | ClientRadar - Unlimited Access">
    <meta name="description" content="Unlock unlimited freelance projects for $29/month. Get AI-powered proposals, instant alerts, priority support, and access to 300+ daily projects.">
    <meta name="keywords" content="freelance subscription, premium freelance platform, AI proposal generator pricing, freelance membership, unlimited projects access">
    <meta name="robots" content="index, follow">
    <meta name="language" content="English">
    <meta name="author" content="ClientRadar">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://digvera.com/clientradar/ui/locked.php">
    <meta property="og:title" content="Premium Plans & Pricing | ClientRadar">
    <meta property="og:description" content="Unlock unlimited freelance projects for $29/month.">
    <meta property="og:site_name" content="ClientRadar">
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://digvera.com/clientradar/ui/locked.php">
    <meta property="twitter:title" content="Premium Plans & Pricing | ClientRadar">
    <meta property="twitter:description" content="Unlock unlimited freelance projects for $29/month.">
    <link rel="canonical" href="https://digvera.com/clientradar/ui/locked.php">
    <meta name="theme-color" content="#667eea">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .container { max-width: 900px; width: 100%; }

        .card {
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 60px 40px;
            text-align: center;
            color: white;
        }

        .lock-icon {
            font-size: 80px;
            margin-bottom: 20px;
            animation: bounce 2s infinite;
        }

        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50%       { transform: translateY(-10px); }
        }

        .header h1 { font-size: 2.5em; margin-bottom: 10px; font-weight: 700; }
        .header p  { font-size: 1.2em; opacity: 0.95; }

        .content { padding: 50px 40px; }

        .stats-box {
            background: #f8f9fa;
            padding: 25px;
            border-radius: 15px;
            margin-bottom: 40px;
            border-left: 5px solid #667eea;
        }

        .stats-box h3   { color: #667eea; margin-bottom: 15px; font-size: 1.3em; }
        .stats-row      { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #e0e0e0; }
        .stats-row:last-child { border-bottom: none; }
        .stats-label    { color: #64748b; font-weight: 500; }
        .stats-value    { color: #1e293b; font-weight: 700; }

        .features       { margin: 40px 0; }
        .features h2    { color: #1e293b; margin-bottom: 30px; font-size: 1.8em; text-align: center; }

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 25px;
            margin-bottom: 40px;
        }

        .feature-item       { display: flex; align-items: flex-start; gap: 15px; }
        .feature-icon       { font-size: 24px; color: #667eea; flex-shrink: 0; }
        .feature-text h4    { color: #1e293b; margin-bottom: 5px; font-size: 1.1em; }
        .feature-text p     { color: #64748b; font-size: 0.95em; line-height: 1.5; }

        .pricing {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            margin: 40px 0;
        }

        .pricing-card {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 35px;
            text-align: center;
            border: 3px solid transparent;
            transition: all 0.3s;
            position: relative;
        }

        .pricing-card:hover {
            border-color: #667eea;
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(102,126,234,0.2);
        }

        .pricing-card.popular {
            border-color: #667eea;
            background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
        }

        .popular-badge {
            background: #667eea;
            color: white;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.85em;
            font-weight: 600;
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
        }

        .pricing-card h3 { color: #1e293b; font-size: 1.5em; margin-bottom: 15px; }

        .price {
            font-size: 3em;
            font-weight: 700;
            color: #667eea;
            margin: 20px 0;
        }

        .price-period { font-size: 0.4em; color: #64748b; font-weight: 400; }

        .savings {
            background: #10b981;
            color: white;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.9em;
            font-weight: 600;
            display: inline-block;
            margin-bottom: 20px;
        }

        /* ── Payment buttons ── */
        .btn {
            display: inline-block;
            padding: 15px 40px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            text-decoration: none;
            border-radius: 10px;
            font-weight: 600;
            font-size: 1.1em;
            transition: all 0.3s;
            border: none;
            cursor: pointer;
            width: 100%;
            margin-top: 20px;
            text-align: center;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(102,126,234,0.4);
            color: white;
        }

        .btn-secondary {
            background: transparent;
            border: 2px solid #667eea;
            color: #667eea;
        }

        .btn-secondary:hover {
            background: #667eea;
            color: white;
        }

        /* Lemon Squeezy badge */
        .payment-badge {
            margin-top: 12px;
            font-size: 0.8em;
            color: #94a3b8;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }

        .testimonial {
            background: #eff6ff;
            padding: 30px;
            border-radius: 15px;
            margin: 40px 0;
            border-left: 5px solid #3b82f6;
        }

        .testimonial-text   { font-style: italic; color: #1e293b; font-size: 1.1em; margin-bottom: 15px; line-height: 1.6; }
        .testimonial-author { color: #64748b; font-weight: 600; }

        .cta-section {
            text-align: center;
            margin-top: 40px;
            padding-top: 40px;
            border-top: 2px solid #e5e7eb;
        }

        .cta-section p { color: #64748b; margin-bottom: 20px; }

        /* Payoneer fallback */
        .payoneer-section {
            background: #fef9ec;
            border: 2px solid #f59e0b;
            border-radius: 12px;
            padding: 20px 25px;
            margin-top: 30px;
            text-align: center;
        }

        .payoneer-section h4 { color: #92400e; margin-bottom: 8px; }
        .payoneer-section p  { color: #78350f; font-size: 0.95em; margin-bottom: 12px; }
        .payoneer-section a  { color: #d97706; font-weight: 600; }

        @media (max-width: 768px) {
            .header  { padding: 40px 20px; }
            .header h1 { font-size: 1.8em; }
            .content { padding: 30px 20px; }
            .feature-grid { grid-template-columns: 1fr; }
            .pricing      { grid-template-columns: 1fr; }
        }
    </style>
</head>
<body>

<div class="container">
    <div class="card">

        <!-- Header -->
        <div class="header">
            <div class="lock-icon">🔒</div>
            <h1>You've Hit Your Daily Limit</h1>
            <p>Upgrade to Premium for unlimited access to opportunities</p>
        </div>

        <!-- Content -->
        <div class="content">

            <?php if ($stats): ?>
            <div class="stats-box">
                <h3>📊 Your Usage Today</h3>
                <div class="stats-row">
                    <span class="stats-label">Projects Viewed:</span>
                    <span class="stats-value"><?= $stats['daily_views'] ?> / <?= $stats['views_limit'] ?></span>
                </div>
                <div class="stats-row">
                    <span class="stats-label">Remaining Views:</span>
                    <span class="stats-value"><?= $stats['views_left'] ?></span>
                </div>
                <div class="stats-row">
                    <span class="stats-label">Current Plan:</span>
                    <span class="stats-value"><?= strtoupper($stats['plan']) ?></span>
                </div>
            </div>
            <?php endif; ?>

            <!-- Features -->
            <div class="features">
                <h2>🚀 What You Get with Premium</h2>
                <div class="feature-grid">
                    <div class="feature-item">
                        <div class="feature-icon">✨</div>
                        <div class="feature-text">
                            <h4>Unlimited Projects</h4>
                            <p>Access as many projects as you want, every single day</p>
                        </div>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon">🎯</div>
                        <div class="feature-text">
                            <h4>All Sources</h4>
                            <p>Projects from RemoteOK, Freelancer, and more platforms</p>
                        </div>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon">🔍</div>
                        <div class="feature-text">
                            <h4>Advanced Filters</h4>
                            <p>Find exactly what you need with powerful search tools</p>
                        </div>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon">📧</div>
                        <div class="feature-text">
                            <h4>Daily Email Alerts</h4>
                            <p>Never miss new projects in your niche</p>
                        </div>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon">⭐</div>
                        <div class="feature-text">
                            <h4>Save Favorites</h4>
                            <p>Bookmark projects to review later</p>
                        </div>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon">🏆</div>
                        <div class="feature-text">
                            <h4>Priority Support</h4>
                            <p>Get help when you need it, fast</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Testimonial -->
            <div class="testimonial">
                <div class="testimonial-text">
                    "ClientRadar helped me find 3 high-paying clients in my first month. The Premium plan paid for itself with just one project!"
                </div>
                <div class="testimonial-author">— Sarah J., Web Designer</div>
            </div>

            <!-- Pricing -->
            <h2 style="text-align:center; color:#1e293b; margin-bottom:30px; font-size:1.8em;">
                💎 Choose Your Plan
            </h2>

            <div class="pricing">

                <!-- Monthly -->
                <div class="pricing-card">
                    <h3>Monthly</h3>
                    <div class="price">
                        <?= CURRENCY_SYMBOL ?><?= PREMIUM_PRICE_MONTHLY ?>
                        <span class="price-period">/month</span>
                    </div>
                    <p style="color:#64748b; margin-bottom:20px;">Perfect for trying it out</p>

                    <!-- ✅ Lemon Squeezy checkout — monthly -->
                    <?php $monthly_url = 'https://clientradar.lemonsqueezy.com/checkout/buy/8f40f62c-f314-41d0-a86e-69c1ddaad21a?enabled=1336500' . ($user_email ? '&checkout%5Bemail%5D=' . urlencode($user_email) : ''); ?>
                    <a href="<?= $monthly_url ?>"
                       class="btn btn-secondary"
                       target="_blank"
                       rel="noopener">
                        Get Monthly
                    </a>
                    <div class="payment-badge">🔒 Secure checkout via Lemon Squeezy</div>
                </div>

                <!-- Yearly (popular) -->
                <div class="pricing-card popular">
                    <div class="popular-badge">⭐ BEST VALUE</div>
                    <h3>Yearly</h3>
                    <div class="savings">Save <?= CURRENCY_SYMBOL ?><?= (PREMIUM_PRICE_MONTHLY * 12) - PREMIUM_PRICE_YEARLY ?></div>
                    <div class="price">
                        <?= CURRENCY_SYMBOL ?><?= PREMIUM_PRICE_YEARLY ?>
                        <span class="price-period">/year</span>
                    </div>
                    <p style="color:#64748b; margin-bottom:20px;">
                        Just <?= CURRENCY_SYMBOL ?><?= round(PREMIUM_PRICE_YEARLY / 12, 2) ?>/month
                    </p>

                    <!-- ✅ Lemon Squeezy checkout — yearly -->
                    <?php $yearly_url = 'https://clientradar.lemonsqueezy.com/checkout/buy/89581b30-e98c-48cb-939a-1b3e2c0ef9e2?enabled=1336563' . ($user_email ? '&checkout%5Bemail%5D=' . urlencode($user_email) : ''); ?>
                    <a href="<?= $yearly_url ?>"
                       class="btn"
                       target="_blank"
                       rel="noopener">
                        Get Yearly &amp; Save 17%
                    </a>
                    <div class="payment-badge">🔒 Secure checkout via Lemon Squeezy</div>
                </div>

            </div>

            <!-- Payoneer fallback -->
            <div class="payoneer-section">
                <h4>💳 Alternative Payment</h4>
                <p>Prefer to pay via Payoneer or bank transfer? Contact us directly.</p>
                <a href="mailto:<?= MAIL_FROM ?>?subject=ClientRadar Premium Payment">
                    Contact us at <?= MAIL_FROM ?>
                </a>
            </div>

            <!-- CTA -->
            <div class="cta-section">
                <p style="font-size:1.1em; color:#1e293b;">
                    💡 <strong>Remember:</strong> One project can pay for an entire year of Premium!
                </p>
                <a href="projects_table.php" class="btn btn-secondary" style="max-width:300px; margin:20px auto; display:block;">
                    ← Back to Free Projects
                </a>
            </div>

        </div>
    </div>
</div>

</body>
</html>